<template>
    <div class="bg-white nav flex justify-center">
      <div style="width: 75%;" class="flex justify-between items-center tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="`tab ${index == activeIndex ? 'active' : ''}`"
          @click="changeTab(index)"
        >
          {{ tab.title }}
        </div>
      </div>
    </div>
</template>

<script>
import WMZIcon from "../../../components/icon";
export default {
  name: "navJ",
  components: { WMZIcon },
  data() {
    return {
      showAuth: false,
      authType: 0,
      activeIndex: 0,
      tabs: [
        { title: "商业贷款", url: "" },
        { title: "组合贷款", url: "" },
        { title: "公积金贷款", url: "" },
      ],
    };
  },
  methods: {
    changeTab(tab) {
      this.activeIndex = tab;
    }
  },
};
</script>

<style scoped lang="scss">
.nav {
  height: 54px;
  width: 100%;
  padding-bottom: 10px;
  .tab {
    font-family: PingFangSC-Regular;
    font-size: 15px;
    color: #A6A6A6;
    letter-spacing: 0;
    text-align: center;
    padding-bottom:5px;
  }

  .active {
    color: #1e1e1e;
    border-bottom: 2px solid #4687f2;
  }
}
</style>
